<template>
  <div class="app">
    <header class="app-header">
      <h1>Company UI 组件库</h1>
      <p>基于 Vue 3 的企业级组件库</p>
    </header>

    <main class="app-main">
      <!-- Button 组件示例 -->
      <section class="demo-section">
        <h2>Button 按钮</h2>
        
        <div class="demo-group">
          <h3>基础用法</h3>
          <div class="demo-row">
            <ui-button>默认按钮</ui-button>
            <ui-button type="primary">主要按钮</ui-button>
            <ui-button type="dashed">虚线按钮</ui-button>
            <ui-button type="text">文本按钮</ui-button>
            <ui-button type="link">链接按钮</ui-button>
          </div>
        </div>

        <div class="demo-group">
          <h3>按钮尺寸</h3>
          <div class="demo-row">
            <ui-button size="small">小号按钮</ui-button>
            <ui-button size="default">默认按钮</ui-button>
            <ui-button size="large">大号按钮</ui-button>
          </div>
        </div>

        <div class="demo-group">
          <h3>按钮形状</h3>
          <div class="demo-row">
            <ui-button shape="default">默认形状</ui-button>
            <ui-button shape="round">圆角按钮</ui-button>
            <ui-button shape="circle" icon="🔍"></ui-button>
          </div>
        </div>

        <div class="demo-group">
          <h3>按钮状态</h3>
          <div class="demo-row">
            <ui-button>正常状态</ui-button>
            <ui-button disabled>禁用状态</ui-button>
            <ui-button loading>加载中</ui-button>
            <ui-button danger>危险按钮</ui-button>
          </div>
        </div>

        <div class="demo-group">
          <h3>特殊按钮</h3>
          <div class="demo-row">
            <ui-button block>块级按钮</ui-button>
          </div>
          <div class="demo-row">
            <ui-button ghost type="primary">幽灵按钮</ui-button>
            <ui-button ghost>幽灵按钮</ui-button>
          </div>
        </div>

        <div class="demo-group">
          <h3>带图标按钮</h3>
          <div class="demo-row">
            <ui-button icon="📁">文件夹</ui-button>
            <ui-button type="primary" icon="💾">保存</ui-button>
            <ui-button icon="🔍" shape="circle"></ui-button>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { Button as UiButton } from '../src'
</script>

<style scoped>
.app {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.app-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  padding: 2rem;
}

.app-header h1 {
  margin: 0 0 0.5rem 0;
  font-size: 2.5rem;
  font-weight: 300;
}

.app-header p {
  margin: 0;
  font-size: 1.2rem;
  opacity: 0.9;
}

.app-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.demo-section {
  background: white;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.demo-section h2 {
  margin: 0 0 1.5rem 0;
  color: #333;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 0.5rem;
}

.demo-group {
  margin-bottom: 2rem;
}

.demo-group h3 {
  margin: 0 0 1rem 0;
  color: #666;
  font-size: 1.1rem;
}

.demo-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.demo-row:last-child {
  margin-bottom: 0;
}
</style>
